<template>
  <j-modal
    :title='title'
    :width='1000'
    :visible='visible'
    :maskClosable='false'
    :confirmLoading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <!--    <div class='info-line'>基础设置</div>-->
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24'>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='合同名称'
              >
              <a-input placeholder='请输入' v-decorator="['regionManager', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='经销商编号'
              >
              <a-input-search readOnly @search='custSearch' placeholder='请选择' v-decorator="['regionId', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='经销商名称'
              >
              <a-input placeholder='请输入' v-decorator="['regionManager', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='年份'
              >
              <a-input placeholder='请输入' v-decorator="['regionManager', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='有效期'
            >
              <a-range-picker v-decorator="['range-picker']" />
            </a-form-item>
          </a-col>
        </a-row>
        <div style='margin:0 0 8px 4px'>销量目标 : </div>
        <a-table
          bordered
          rowKey='id'
          :scroll='{x:1000,y:pageHeight-seachHeight-220}'
          :columns='columns'
          :dataSource='dataSource'
        >
          <template slot='terminalss' slot-scope='t,r,index'>
          <a-input style='width:80%' />
          </template>
        </a-table>
        <div style='margin:0 0 8px 4px'>证件附件 : <HUpload v-bind="loadDatas" ref="hupload" v-decorator="['url']" @loadOk="handleChange"></HUpload> </div>
      </a-form>
    </a-spin>
    <proChose ref='prochoose' @okbro='okbropro'></proChose>
  </j-modal>
</template>

<script>
import proChose from '@comp/cn-components/ProChose'
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import { isMobile, isPermit } from '@/utils/validate'
import UploadImage from '@/components/upload-image/UploadImage'
import HUpload from '@/components/cn-components/Hupload'
import Area from '@/components/utils/Area'

export default {
  name: 'contactManaModal',
  data() {
    return {
      actionUrl: window._CONFIG['domianUploadURL']+ '/cnUploadController/uploadOss',
      columns: [
        {
          title: '月度',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '1',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '2',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '3',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '4',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '5',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '6',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '7',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '8',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '9',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '10',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '11',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '12',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        },
        {
          title: '合计(万元)',
          align: 'left',
          scopedSlots: { customRender: 'terminalss' },
          ellipsis: true,
          width: 150
        }
      ],
      sendPro: false,
      remarks: '',
      dataSource: [
        {
          terminalCodess: '目标额'
        }
      ],
      manobjList: [0],
      areaData: '',
      areaLinkage: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        telephone: {
          rules: [
            { required: true, message: '', trigger: 'submit' },
            {
              validator: function(rule, value, callback) {
                if (!isMobile(value)) {
                  callback(new Error(''))
                }
                callback()
              }
            }
          ]
        },
        businessLicense: {
          rules: [
            { required: true, message: '', trigger: 'submit' },
            {
              validator: function(rule, value, callback) {
                if (!isPermit(value)) {
                  callback(new Error(''))
                }
                callback()
              }
            }
          ]
        },
        terminalName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        warehouseName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        address: {
          rules: [
            { required: true, message: '' }
          ]
        }
      },
      addOrUpdateUrl: window._CONFIG['domianURL'] + '/cnTerminalController/saveOrUpdateTerminal'
    }
  },
  components: { JAreaLinkage, UploadImage, HUpload, proChose },
  created() {
  },
  methods: {
    moment,
    handleChange(info) {
      if (info == 0) {
        this.urls = []
      } else {
        this.urls = info
      }
    },
    add() {
      this.edit()
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
    },
    handleCancel() {
      this.$emit('close')
      this.visible = false
    },
    custSearch(status) {
      this.$refs.prochoose.rowKey = 'custCode'
      let formconfig = [
        {
          key: 'custCode',
          label: '经销商编号'
        },
        {
          key: 'custName',
          label: '经销商名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '经销商编号',
            align: 'center',
            dataIndex: 'custCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '经销商名称',
            align: 'center',
            dataIndex: 'custName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/customerController/getPageList',
        multiple: false,
        columW: 8
      }
      let dataSource = []
      if (this.form.getFieldValue('custCode')) {
        dataSource = [{
          custCode: this.form.getFieldValue('custCode'),
          custName: this.form.getFieldValue('custName')
        }]
      }
      this.name = '经销商'
      this.$refs.prochoose.edit(formconfig, tableconfig, status, 'status2', dataSource)
    }
  },
  computed: {
    loadDatas() {
      return {
        actionUrl: this.actionUrl,
        text: '上传附件'
      }
    }
  },
}
</script>

<style lang='less' scoped>
.info-line {
  display: flex;
  flex-direction: row;
}

.info-line:before {
  content: "";
  flex: 0.1;
  border-bottom: 1px solid #ebedee;
  margin: auto 4px;
}

.info-line:after {
  content: "";
  flex: 0.9;
  border-bottom: 2px solid #ebedee;
  margin: auto 4px;
}
</style>